import React, { useRef } from 'react';
import { useModel } from 'umi';
import type { ProFormInstance } from '@ant-design/pro-form';
import {
  ModalForm,
  ProFormText,
  ProFormTextArea,
  ProFormSwitch,
  ProFormDigit,
  ProFormSelect,
  ProFormDependency,
  ProFormTreeSelect,
} from '@ant-design/pro-form';

import * as c from '@/services/consts';
import * as apiGroup from '@/services/vpnGroup';

type FormProps = {
  visible: boolean;
  defaultProductId: number | undefined;
  current: API.ServiceTypeModel | undefined;
  onCancel: () => void;
  onSubmit: (values: API.ServiceTypeModel) => Promise<void>;
};

const Form: React.FC<FormProps> = (props) => {
  const { visible, defaultProductId, current, onCancel, onSubmit } = props;
  if (!visible) {
    return null;
  }

  let defaultCurrent: Partial<API.ServiceTypeModel> | undefined = undefined;
  if (!current) {
    defaultCurrent = {
      sort: 1,
      status: true,
      productId: defaultProductId,
    };
  }

  const formRef = useRef<ProFormInstance>();

  const { getProductOptions } = useModel('useGlobalModel', (model) => ({
    getProductOptions: model.getProductOptions,
  }));

  const productOptions = getProductOptions(false);

  const loadGroupTreeData = async (params: { [key: string]: any }) => {
    const treeData = await apiGroup.loadProductGroupTrees(params);

    // console.log('treeData:', treeData);
    // console.log('groupIds:', current?.groupIds);

    return Promise.resolve(treeData);
  };

  return (
    <ModalForm<API.ServiceTypeModel>
      layout="horizontal"
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 18 }}
      formRef={formRef}
      visible={visible}
      initialValues={current ? current : defaultCurrent}
      //preserve={false}
      //trigger={<>{children}</>}
      title={`${current ? '编辑' : '添加'}服务类型`}
      width={640}
      onFinish={onSubmit}
      modalProps={{
        onCancel: onCancel,
        //destroyOnClose: true,
        maskClosable: false,
      }}
    >
      <ProFormSelect
        name="productId"
        label="产品"
        options={productOptions}
        rules={[{ required: true, message: '请选择产品' }]}
      />
      <ProFormSelect
        name="type"
        label="类型"
        options={c.MemberLevelOptions}
        rules={[{ required: true, message: '请选择类型' }]}
      />
      <ProFormText
        name="name"
        label="名称"
        rules={[{ required: true, message: '请输入名称' }]}
        placeholder="请输入名称"
      />
      <ProFormDependency name={['productId']}>
        {({ productId }) => {
          return (
            <ProFormTreeSelect
              name="groupIds"
              label="服务器分组"
              placeholder="请选择服务器分组"
              allowClear={false}
              // secondary
              rules={[{ required: true, message: '请选择服务器分组' }]}
              params={{ productId }}
              request={loadGroupTreeData}
              // tree-select args
              fieldProps={{
                showArrow: true,
                showSearch: false,
                treeCheckable: true,
                multiple: true,
                treeDefaultExpandAll: true,
                // treeNodeLabelProp: 'title',
              }}
            />
          );
        }}
      </ProFormDependency>
      <ProFormDigit
        name="sort"
        label="排序"
        wrapperCol={{ span: 4 }}
        min={0}
        max={9999}
        fieldProps={{ defaultValue: 0 }}
      />
      <ProFormTextArea name="remark" label="备注" />
      <ProFormSwitch name="status" label="状态" />
    </ModalForm>
  );
};

export default Form;
